<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery特效</title>
</head>
<body>
    <div class="xx a b c eee" data-id="自定义的" title="yy">html5 特性：contenteditable="true" 文档可编辑</div>
    <div id="ctlObj" style="height: 360px; width: 760px; background-color: gray"></div>
    <div>
        <button id="hide" type="button">hidden</button>
        <button id="show" type="button">display</button>
        <button id="play" type="button">rePlay</button>
        <button id="danding" type="button">淡定</button>
    </div>

    <div id="a">
    <div class="b">我是number0</div>
    <div class="b">我是number1</div>
    <div class="b">我是number2</div>
    <div class="b">我是number3</div>
    <div class="b">我是number4</div>
    <div class="b">我是number5</div>
    <div class="b">我是number6</div>
    <div class="b">我是number7</div>
    <div class="b">我是number8</div>
    <div class="b">我是number9</div>
    </div>

    <script src="../../5月学习笔记及练习/20190507/jquery-3.4.0.min.js"></script>
    <script src="./js/jquery.easing.1.3.js" ></script>
    <script >
        console.log($('.xx').attr('title'));
        console.log($('.xx').attr('data-id'));
        console.log($('.xx').prop('data-id'));
        console.log($('.xx').prop('title'));
        $('.xx').attr('title', 'hhhhhhhh');
        console.log($('.xx').prop('title'));
        $('.xx').removeProp('title');
        $('.xx').removeAttr('title');
        $('.xx').addClass('xxxxxx');
        $('.xx').removeClass('xx');

        //// $('.xx').toggleClass('eeeeeerrrrr')

        //隐藏显示再来一次
        // $('#hide').click(function() {
        //     $('#ctlObj').hide(3000);
        // });
        // $('#show').click(function () {
        //     $('#ctlObj').show(5000);
        // });
        // $('#play').click(function () {
        //     $('#ctlObj').toggle(9000)
        // });

        //第二种实现方法
        // $('#hide').click(function () {
        //     $('#ctlObj').slideUp(5000,'easeInOutBounce',function () {
        //         alert(1234567890);
        //     })
        // });
        // $('#show').click(function () {
        //     $('#ctlObj').slideDown(5000,'easeOutBack');
        // });
        // $('#play').click(function () {
        //     $('#ctlObj').slideToggle(5000);
        // });

        //第三种实现方法：
        $('#hide').click(function () {
            $('#ctlObj').fadeOut(3000);
        });
        $('#show').click(function () {
            $('#ctlObj').fadeIn(3000);
        });
        $('#play').click(function () {
            $('#ctlObj').fadeToggle(3000);
        });
        $('#danding').click(function () {
            $('#ctlObj').fadeTo(3000,0.1);
        });

        $('#a div').click(function () {
            //获取一个元素在选中元素列表中的索引
            alert($(this).index());
        });

    </script>
</body>
</html>